<template>
  <div class="fixed bottom-[12rem] right-4 z-50">
    <button
      @click="toggleTheme"
      class="p-3 rounded-full bg-bg-black-4 hover:bg-bg-black-5 transition-colors shadow-lg"
      :aria-label="`切换至${currentTheme === 'dark' ? '明亮' : '暗黑'}模式`"
    >
      <Icon 
        :name="currentTheme === 'dark' ? 'heroicons:sun-20' : 'heroicons:moon-20'" 
      />
    </button>
  </div>
</template>

<script setup>
const { currentTheme, toggleTheme } = useTheme()
</script>